<template xmlns:a="http://www.w3.org/1999/html">
  <div class="u-page u-page-process-bg u-box">
    <!-- 标题 -->
    <div class="u-cl-white u-pt-20 u-pb-20" v-if="isShow == 1">
      <div class="u-fz-26 u-font-bold">{{ form.subject }}</div>
      <div class="u-number u-pb-10 u-pt-10">NO.{{ form.taskNum }}</div>
    </div>

    <div class="u-cl-white u-pt-20 u-pb-20" v-if="isShow == 2">
      <div class="u-fz-26 u-font-bold">补充资料</div>
      <div class="u-number u-pb-10 u-pt-10">补充您的报名资料</div>
    </div>

    <!-- 表单 -->
    <div
      class="rule-form rule-form-input-right u-box u-radius-lg u-shadow u-bcl-white"
    >
      <u-form ref="uForm" :model="form">
        <!-- 需求详情 -->
        <div v-if="isShow == 1">
          <u-form-item
            label="需求描述"
            label-position="top"
            :border-bottom="false"
          >
            <div v-html="form.details"></div>
          </u-form-item>

          <div
            v-for="(formItem, index) in attachmentList"
            :key="index"
            style="margin-top: 16rpx"
          >
            <u-icon class="u-cl-content" name="attach"></u-icon>
            <span
              class="u-pr-10"
              style="color: #3b79fe"
              @click="this.preview(formItem.uri, formItem.suffix)"
              >{{ formItem.fileName }}</span
            >
          </div>

          <u-form-item label="项目预算(元)">
            <div class="u-text-right">{{ form.budget }}</div>
          </u-form-item>
          <u-form-item label="付款方式">
            <div class="u-text-right">{{ form.paymentType }}</div>
          </u-form-item>
          <u-form-item label="报名截止日期">
            <div class="u-text-right">{{ form.deadline }}</div>
          </u-form-item>
          <u-form-item label="备注">
            <div class="u-text-right">已预交项目保证金，项目风险较低。</div>
          </u-form-item>
        </div>
        <!-- 补充资料 -->
        <div v-if="isShow == 2">
          <u-form-item
            label="温馨提示:报名后，需求方将有权查看您的最佳拍档资料，请知晓！"
            label-position="top"
            :border-bottom="true"
          >
          </u-form-item>
          <u-form-item
            label="进一步完善资料，能提高您的成功率哦（选填）"
            label-position="top"
            :border-bottom="false"
          >
          </u-form-item>
          <u-form-item
            label="个人简介"
            prop="bio"
            label-position="top"
            :border-bottom="false"
          >
            <u-input
              type="textarea"
              placeholder="请用一句话概括自己，限20字"
              maxlength="20"
              height="20"
              v-model="form.bio"
            ></u-input>
          </u-form-item>
          <u-form-item label-position="top" :border-bottom="false">
            <div
              style="float: left; color: #3b79fe; text-decoration: underline"
              @click="addCase"
            >
              添加成功案例
            </div>
            <div
              style="float: right; color: #fe3b41; text-decoration: underline"
              @click="removeCase"
              v-if="caseJsonData.length > 0"
            >
              删除成功案例
            </div>
          </u-form-item>
        </div>
        <div
          v-if="isShow == 2"
          v-for="(item, index) in caseJsonData"
          :key="index"
        >
          <u-form-item
            label="案例名称"
            label-position="top"
            :border-bottom="false"
          >
            <u-input
              type="textarea"
              placeholder="请输入案例名称"
              maxlength="200"
              height="50"
              @blur="checkLength(item.caseName)"
              v-model="item.caseName"
            >
            </u-input>
          </u-form-item>

          <u-form-item
            label="案例描述"
            label-position="top"
            :border-bottom="false"
          >
            <u-input
              type="textarea"
              placeholder="请简单概括案例，200字内"
              maxlength="200"
              height="50"
              @blur="checkLength(item.caseDetails)"
              v-model="item.caseDetails"
            ></u-input>
          </u-form-item>
          <u-form-item label="关键字" prop="skills">
            <div class="u-flex u-col-center">
              <!-- 已添加的标签列表 -->
              <div class="u-scroll-x u-mr-5" style="width: 450rpx">
                <u-tag
                  v-for="(item, i) in item.skills"
                  :key="i"
                  :text="item.label"
                  type="info"
                  mode="dark"
                  close-color="#828282"
                  closeable
                  @click="onCloseTag(i, index)"
                ></u-tag>
              </div>

              <!-- 添加标签按钮 -->
              <div class="u-center">
                <u-icon
                  class="u-pointer"
                  name="plus-circle"
                  size="46"
                  @click="
                    toTagSettingPage(item.skills, 1, 'saveTagList' + index)
                  "
                ></u-icon>
              </div>
            </div>
          </u-form-item>
        </div>
      </u-form>
    </div>

    <!-- 按钮 -->
    <div class="u-mt-20 u-mb-10" v-if="isShow == 1">
      <u-button type="primary" shape="circle" @click="addCase(1)">
        报名
      </u-button>
    </div>
    <div class="u-mt-20 u-mb-10" v-if="isShow == 2">
      <u-button type="primary" shape="circle" @click="signupDemand">
        提交报名
      </u-button>
    </div>
    <div style="margin-top: 10rpx" v-if="isShow == 2">
      <u-button type="info" shape="circle" @click="this.goBack">
        关闭
      </u-button>
    </div>
  </div>
</template>

<script src="./js/partnerApply.js"></script>
<style src="./css/common.scss" lang="scss"></style>
